<template>
  <div class="page-header">
    <div class="page-header-left">
      <img width="auto" height="22" :src="logo" alt="logo" class="page-header-left-logo">
      <!-- <h1 class="page-header-left-title">全链路观测平台</h1> -->
      <header-menu v-if="!isLoginPage"></header-menu>
    </div>
    <div class="page-header-right">
      <!-- <EngineInfo /> -->
      <!-- <GlobalHelp /> -->
      <!-- <ChangeLang /> -->
      <UserInfo class="page-header-right-item" v-if="!isLoginPage" />
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import HeaderMenu from './HeaderMenu'
import UserInfo from './UserInfo'
import GlobalHelp from './GlobalHelp'
import ChangeLang from './ChangeLang'
import EngineInfo from './EngineInfo'
import { mapState } from 'vuex'
import logoUrl from "@/assets/images/logo.png"

@Component({
  components: {
    HeaderMenu,
    UserInfo,
    GlobalHelp,
    ChangeLang,
    EngineInfo
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      isTrial: state => state.global.is_trial
    }),
    isLoginPage() {
      return this.$route.name === 'login'
    }
  }
})
export default class Header extends Vue {
  logo = logoUrl
}
</script>
<style lang="scss" scoped>
.page-header {
  display: flex;
  background-color: $--color-nav;
  height: $page-header-height;
  line-height: $page-header-height;
  justify-content: space-between;

  &-left {
    display: flex;

    &-title {
      width: 300px;
      font-size: 16px;
      color: $--color-white;
      line-height: 48px;
      padding: 0 20px;
      margin: 0;
    }

    &-logo {
      width: 200px;
      height: 30px;
      margin: 12px 16px;
    }
  }

  &-right {
    padding-right: 20px;
    display: flex;

    &-item {
      margin-left: 10px;
    }
  }
}
</style>